<template>
             <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
      <router-link to="/FuelCostList">油费管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>修改油费</el-breadcrumb-item>
 </el-breadcrumb></div>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="车牌号：" prop="licensePlateNumber">
            <el-input v-model="form.licensePlateNumber" placeholder="请输入车牌号" />
        </el-form-item>
       
        <el-form-item label="加油费用/元:" prop="fuelCostPerLiter">
            <el-input v-model="form.fuelCostPerLiter" placeholder="请输入加油费用" />
        </el-form-item>
       
        <el-form-item label="加油量/L:" prop="refuelingQuantity">
            <el-input v-model="form.refuelingQuantity" placeholder="请输入加油量" />
        </el-form-item>
       <el-form-item label="起始公里数:" prop="startingKilometers">
            <el-input v-model="form.startingKilometers" placeholder="请输入起始公里数" />
        </el-form-item>
               <el-form-item label="支付方式:" prop="payMethod">
            <el-radio-group v-model="form.payMethod">
      <el-radio :value="1" size="large">微信支付</el-radio>
      <el-radio :value="2" size="large">支付宝支付</el-radio>
      <el-radio :value="3" size="large">银联支付</el-radio>
      <el-radio :value="4" size="large">企业转账</el-radio>
      <el-radio :value="5" size="large">线下支付</el-radio>
      <div>
          <el-radio :value="6" size="large">其他</el-radio>
        <el-input v-if="form.payMethod == '6'" v-model="form.otherPayMethod" placeholder="请输入其他支付方式" />
      </div>
    </el-radio-group>
        </el-form-item>
               <el-form-item label="经办人:" prop="handledBy">
            <el-input v-model="form.handledBy" placeholder="请输入经办人" />
        </el-form-item>
       
        <el-form-item label="备注:" prop="fuelCostNotes">
            <el-input v-model="form.fuelCostNotes" type="textarea" placeholder="请输入备注" />
        </el-form-item>
  <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
            </el-button>
            <el-button @click="resetForm">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//变量
const form= reactive({
  "fuelCostId": route.query.id,
  "companyID": "",
  "user_Id": "",
  "licensePlateNumber": "",
  "fuelCostPerLiter": "",
  "refuelingQuantity": "",
  "startingKilometers": "",
  "payMethod": "",
  "otherPayMethod": "",
  "handledBy": "",
    "fuelCostNotes": "",
   "deletedBy": "",
    "deletedDate": "",
 "createdBy": "",
    "createdDate": "",
  })
//方法
const GetFuelCost = () => {
    axios.get("/bwrite/api/FuelCost/GetFuelCostBy?FuelCostId=" + form.fuelCostId).then(ter => {
        form.fuelCostId = ter.data.data.fuelCostId
        form.companyID = ter.data.data.companyID
        form.user_Id = ter.data.data.user_Id
        form.licensePlateNumber = ter.data.data.licensePlateNumber
        form.fuelCostPerLiter = ter.data.data.fuelCostPerLiter
        form.refuelingQuantity = ter.data.data.refuelingQuantity
        form.startingKilometers = ter.data.data.startingKilometers
        form.payMethod = ter.data.data.payMethod
        form.otherPayMethod = ter.data.data.otherPayMethod
        form.handledBy = ter.data.data.handledBy
        form.fuelCostNotes = ter.data.data.fuelCostNotes
         form.deletedBy = ter.data.data.deletedBy
        form.deletedDate = ter.data.data.deletedDate
          form.createdBy = ter.data.data.createdBy
         form.createdDate = ter.data.data.createdDate
          })
}
//修改油费信息
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import  {ElMessage } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//验证
const rules = reactive<FormRules>({
    licensePlateNumber: [
        { required: true, message: '车牌号不能为空', trigger: 'blur' },
        
    ],
    fuelCostPerLiter: [
        { required: true, message: '加油费用/元不能为空', trigger: 'blur' },
        
    ],
    refuelingQuantity: [
        { required: true, message: '加油量/升不能为空', trigger: 'blur' },
        
    ],

    startingKilometers: [
        { required: true, message: '起始公里数不能为空', trigger: 'blur' },
        
    ],
    payMethod: [
        { required: true, message: '支付方式不能为空', trigger: 'blur' },
        
    ],
    handledBy: [
        { required: true, message: '经办人不能为空', trigger: 'blur' },
        
    ],
        })
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
          
            axios.post("/bwrite/api/FuelCost/UpdateFuelCost", form).then(ter => {
                if (ter.data.code > 0) {
                    ElMessage.success("修改成功")
                  router.push("/FuelCostList")
                } else {
                    ElMessage.error("修改失败")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = () => {
    router.push("/FuelCostList")
}
//钩子函数
onMounted(async () => {
    GetFuelCost()
    
})
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

